<template>
  <view class="gift-purchase">
    <view class="header">
      <view><uni-status-bar></uni-status-bar></view>

      <view class="search-box flex-cn">
        <view class="navbar-left flex-cn" style="flex: 1" @click="backHome">
          <view
            style="width: 110rpx; text-align: center"
            class="qh-rt-single qh-rt-zuo-zuo navbar-back-icon"
          >
          </view>
        </view>

        <view
          style="
            height: 80rpx;
            line-height: 80rpx;
            font-size: 36rpx;
            font-family: '.PingFang SC, PingFang SC';
            display: flex;
            justify-content: center;
            align-content: center;
            flex: 1;
            color: #000;
            font-weight: 600;
          "
        >
          我的礼品卡
        </view>
        <view style="width: 320rpx; flex: 1"></view>
      </view>

      <view class="tab-menu">
        <view
          :class="{ 'menu-item': true, active: activeIndex === 0 }"
          @click="selectTab(0)"
          >待使用</view
        >
        <view
          :class="{ 'menu-item': true, active: activeIndex === 1 }"
          @click="selectTab(1)"
          >已充值</view
        >
        <view
          :class="{ 'menu-item': true, active: activeIndex === 2 }"
          @click="selectTab(2)"
          >已赠送</view
        >
        <view
          :class="{ 'menu-item': true, active: activeIndex === 3 }"
          @click="selectTab(3)"
          >失效卡</view
        >
      </view>
    </view>

    <view style="background-color: #f6f6f6; margin-bottom: 160rpx">
      <view class="viewa"
        >共有<text>{{ cards.length }}</text
        >个礼品卡</view
      >
      <view
        v-for="(item, index) in cards"
        :key="index"
        style="background-color: #fff; border-radius: 16rpx; margin: 16rpx"
      >
        <view class="viewb">
          <!-- <image src="/static/images/gift_bg.png"></image> -->
          <view class="viewb_title" v-if="activeIndex !== 0">
            <image
              v-if="activeIndex == 1"
              src="https://safood-1317438654.cos.ap-guangzhou.myqcloud.com/Uploads/tempImage/663d794b9abd54634.png"
            ></image>
            <image
              v-if="activeIndex == 2"
              src="https://safood-1317438654.cos.ap-guangzhou.myqcloud.com/Uploads/tempImage/663d794b9ce626485.png"
            ></image>
            <image
              v-if="activeIndex == 3"
              src="https://safood-1317438654.cos.ap-guangzhou.myqcloud.com/Uploads/tempImage/663d794b987998577.png"
            ></image>

            <!-- <text >{{ 
								activeIndex == 1 ? '已充值' : 
								activeIndex == 2 ? '已赠送' : 
								activeIndex == 3 ? '已失效' : 
								''  }}</text> -->
          </view>
          <view class="viewbInner">
            <view style="margin: 24rpx">
              <image
                style="width: 300rpx; height: 180rpx"
                :src="item.img_url"
              ></image>
            </view>
            <view class="use_gift">
              <view class="gift_type">【{{ item.gift_card_class_name }}】</view>
              <view class="cardNum">
                <text>
                  卡号：{{
                    formatCardNumber(item.card_number ? item.card_number : 0)
                  }}
                </text>

                <view class="copy" @click.stop="copyText(item.card_number)">
                  复制
                </view>
              </view>
              <view class="viewbInner1">面额：{{ item.money }}</view>
              <view class="viewbInner2">时间：{{ item.update_time }}</view>
            </view>
          </view>
        </view>

        <view class="cardButton" v-if="activeIndex == 0">
          <view style="color: #ffb73f" @click.stop="Recharge(item.id)"
            >余额充值</view
          >
          <button
            class="card_share"
            open-type="share"
            style="background-color: #ffb73f; color: #fff"
            @tap.stop="onShare(item)"
          >
            赠送好友
          </button>
          <!-- <button class="card_share"  style="background-color: #FFB73F; color: #fff;" @tap.stop="toCard(item)">测试</button> -->
        </view>
      </view>

      <qh-empty-data
        v-if="cards.length <= 0"
        text="暂无数据~"
        width="238rpx"
        height="216rpx"
        :custom-style="{ marginTop: '40rpx' }"
      ></qh-empty-data>
    </view>
    <view class="limit_bottom">
      <view>
        <text style="color: #999" @click="toCardOrder">礼品卡订单</text>
      </view>
    </view>
  </view>
</template>

<script>
import QhImage from "../../../../components/qh-image/qh-image.vue";
// pages/mycard/mycard.js
const app = getApp().globalData;

export default {
  data() {
    return {
      cards: [],
      activeIndex: 0,
      shareItem: null,
    };
  },

  components: { QhImage },
  props: {},

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {},

  /**
   * 生命周期函数--监听页面显示
   */
  async onShow() {
    await this.fetchData(this.activeIndex);
  },

  // onShareAppMessage(res) {
  // 	var that = this;
  // 	var path = '/pages/mine/gift_card/gift_card?id=' + that.id + '&type=2&xcx_vid=' + that.xcx_vid +
  // 		'&store_id=' + this.$store.mallStoreId + '&share_uid=' + app.XcxData.userInfo.uid;
  // 	console.log(path);
  // 	return {
  // 		title: that.gift.money + '元' + that.gift.title + '礼品卡',
  // 		path: path,
  // 		imageUrl: that.gift.img_url
  // 	};
  // },

  onShareAppMessage(res) {
    let item = this.shareItem;
    // /pages/mine/gift_card/gift_card
    // var path = '/pages/mine/gift_card/gift_card?id=' + item.id + '&type=2&xcx_vid=' + item.xcx_vid +
    var path =
      "/pages/mer/tabbar/share_card/share_card?id=" +
      item.id +
      "&type=2&xcx_vid=" +
      item.xcx_vid +
      "&store_id=" +
      this.$store.mallStoreId +
      "&share_uid=" +
      app.XcxData.userInfo.uid;
    return {
      title: item.money + "元" + item.title + "礼品卡",
      path: path,
      imageUrl: item.img_url,
    };
  },
  methods: {
    formatCardNumber(cardNumber) {
      return cardNumber.length > 5
        ? "*****" + cardNumber.substring(cardNumber.length - 5)
        : cardNumber;
    },
    async fetchData(cardStatus) {
      const result = await this.$request(
        "/SmallProgramApi/ShiFu/getMyGiftCard",
        { store_id: this.$store.mallStoreId, card_status: cardStatus }
      );
      this.cards = result.data ? result.data : []; // 更新数据
    },

    //电子卡订单页面
    toCardOrder() {
      uni.navigateTo({
        url: "/pages/mer/tabbar/orderCard/orderCard",
      });
    },

    toCard(item) {
      uni.navigateTo({
        url:
          "/pages/mer/tabbar/share_card/share_card?id=" +
          item.id +
          "&type=2&xcx_vid=" +
          item.xcx_vid +
          "&store_id=" +
          this.$store.mallStoreId +
          "&share_uid=" +
          app.XcxData.userInfo.uid,
      });
    },
    card: function (e) {
      uni.navigateTo({
        url: "/pages/mine/gift_card/gift_card?id=" + e.currentTarget.dataset.id,
      });
    },
    backHome() {
      uni.navigateBack();
    },
    //分享
    onShare(item) {
      this.shareItem = item;
    },

    //标签
    selectTab(index) {
      this.activeIndex = index;
      this.cards = [];
      this.fetchData(index);
    },
    backHome() {
      uni.navigateBack();
    },

    copyText(val) {
      uni.setClipboardData({
        data: val, //你要复制的数据
        success: function () {
          uni.showToast({
            title: "复制成功",
          });
        },
      });
    },
    //余额充值
    Recharge(id) {
      var that = this;
      uni.showModal({
        title: "提示",
        content: "充值到会员卡余额后,将无法在转赠给他人,确定充值吗？",
        showCancel: true,
        confirmColor: "#ff5c6d",
        success: function (res) {
          if (res.confirm) {
            getApp().globalData.sendRequest({
              url: "/GiftCard/giftSelfUse",
              type: "post",
              data: {
                id,
              },
              success: function (res) {
                if (res.status == 1) {
                  uni.showToast({
                    title: res.msg,
                    duration: 1500,
                    mask: true,
                    success: function () {
                      setTimeout(function () {
                        that.fetchData();
                      }, 1000);
                    },
                  });
                } else if (res.status == 2) {
                  uni.showModal({
                    title: "提示",
                    content: "暂未绑定会员卡？",
                    showCancel: true,
                    confirmText: "去绑定",
                    confirmColor: "#ff5c6d",
                    success: function (res) {
                      if (res.confirm) {
                        uni.navigateTo({
                          url: "/pages/mine/card/card",
                        });
                      }
                    },
                  });
                  return;
                } else {
                  uni.showToast({
                    title: res.msg,
                    icon: "none",
                    duration: 2000,
                    mask: true,
                  });
                }
              },
            });
          }
        },
      });
    },
  },
};
</script>
<style>
@import "./my_gift_mycard.css";
.gift-purchase {
  height: 100vh;
  overflow-y: auto;
  width: 100%;
  /* background-color: #F0F2EE; */
  padding-bottom: 24rpx;
}

.card_share::after {
  border: none;
}

.limit_bottom {
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  bottom: 0rpx;
  width: 750rpx;
  height: 100rpx;
  padding-bottom: env(safe-area-inset-bottom);
  background: #ffffff;
  box-shadow: 0rpx -8rpx 12rpx 2rpx rgba(22, 38, 0, 0.04);
  border-radius: 0rpx 0rpx 0rpx 0rpx;
}

/* .limit_bottom view:nth-child(2){
    margin: 24rpx;
    width: 149rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 57rpx;
    background: #FFB73F;
    border-radius: 40rpx 40rpx 40rpx 40rpx;
} */

.bottom_title {
  font-family: ".PingFang SC-Regular", Arial, sans-serif;
  font-weight: 600;
  font-size: 28rpx;
  color: #ffffff;
  text-align: center;
  font-style: normal;
  text-transform: none;
}
</style>
